<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
    <div ref="my_home" :safe-area-inset-bottom="true">
      <van-tabbar v-model="active" placeholder>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/classify">分类</van-tabbar-item>
        <van-tabbar-item icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
      </van-tabbar>
    </div>

  </div>
</template>

<script>
export default {
  //起名
  name: "",
  //不知道干啥的
  mixins: [],
  //组件注册
  components: {},
  //接收属性的
  props: [],
  //存放数据
  data() {
    return {
      active: "",
    };
  },
  //存放计算属性
  computed: {},
  //侦听属性
  watch: {
    //监听路由地址变化
    //to代表的是你要跳转的页面，from代表的是原页面，即跳转之前的页面
    $route(to) {
      if (to.name == "home") {
        this.active = 0;
      } else if (to.name == "classify") {
        this.active = 1;
      } else if (to.name == "cart") {
        this.active = 2;
      } else if (to.name == "my") {
        this.active = 3;
      }
    },
  },
  //创建完成生命周期
  created() {
    console.log(this.$route.path);
  },
  //挂载完成生命周期
  mounted() {
    var that = this;
    setTimeout(function () {
      that.loaded();
    }, 2000);
    document.querySelector("#app").style.height =
      window.innerHeight -
      document.querySelector(".van-tabbar").offsetHeight +
      "px";
  },
  //销毁完成生命周期
  destroyed() {},
  //存放方法
  methods: {
    loaded() {
      const loading = document.querySelector("#loading-v3");
      if (loading) {
        document.body.removeChild(loading);
      }
    },
  },
  //路由守卫
  // beforeRouteEnter(to, from, next) {
  // console.log(to.query.activeKey - 0);
  // console.log(from);
  // console.log(next);
  // next((vm)=>{
  //vm=this
  // });
  // },
  // beforeRouteEnter(to, from, next) {
  //   next((vm) => {});
  // },
};
</script>

<style>
h4 {
  margin: 10px;
}
#app {
  position: relative;
  height: 100%;
  overflow: hidden;
}
#app::-webkit-scrollbar {
  display: none;
}
</style>
